<template>
  <a-modal :visible="visible" :title="title" width="65vw" :top="80" :alignCenter="false" unmount-on-close @cancel="close">
    <div style="width: 100%; overflow-x: hidden">
      <a-alert>批量释放库存会对账号状态和同步库存状态都为开启的渠道账号，且是由启程发起的临时占用进行库存的释放。</a-alert>
      <br />
      <page-form :model="form" layout="vertical" div="true" class="page-form" ref="formRef">
        <page-form-item
          field="dateRange"
          label="释放周期"
          size="1"
          required
          :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
        >
          <i-range-picker
            v-model="form.dateRange"
            showTime
            :timePickerProps="{
              defaultValue: ['00:00:00', '23:59:59'],
            }"
            :disabledDate="(current) => dayjs(current).isBefore(dayjs().startOf('day'))"
          />
        </page-form-item>
      </page-form>
      <div class="h-block">
        <a-descriptions align="right" layout="inline-horizontal">
          <a-descriptions-item label="车型">{{ platoonCarInfo.modelName }}</a-descriptions-item>
          <a-descriptions-item label="车牌号">{{ platoonCarInfo.licenseNo }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>

    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { ref, inject } from 'vue'
  import { removeBatchTempUse } from '@/api/asset/carStock'
  import { Message } from '@arco-design/web-vue'

  // 加载数据
  const loadDataFn = inject('loadDataFn') as Function
  // 模态框显示
  const title = '批量释放库存'
  const visible = ref(false)

  const platoonCarInfo = ref({
    startDate: undefined,
    carId: undefined,
    modelName: undefined,
    licenseNo: undefined,
  })
  const form = ref({
    carId: 0,
    dateRange: [],
  })
  // 开启
  const open = (data: any) => {
    platoonCarInfo.value = data
    form.value = {
      carId: data.carId,
      dateRange: [],
    }
    visible.value = true
  }
  // 关闭
  const close = () => {
    visible.value = false
  }

  // 排车校验
  const formRef = ref()
  const handleSubmit = () => {
    formRef.value.validate((error: any) => {
      if (!error) {
        const params = {
          carId: platoonCarInfo.value.carId,
          fromTime: form.value.dateRange[0],
          toTime: form.value.dateRange[1],
        }
        removeBatchTempUse(params).then(() => {
          Message.success('批量释放库存成功')
          loadDataFn()
          close()
        })
      }
    })
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .h-block {
    padding-top: 16px;
    padding-left: 16px;
    height: 62px;
    background: rgba(247, 248, 250, 0.5);
  }

  .order-info-item {
    .custom-tag {
      margin-right: 8px;
      margin-bottom: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 10px;
  }

  .link-wrapper {
    font-size: 14px;
    .text-link {
      color: rgb(var(--primary-6));
      cursor: pointer;
      &.no-link {
        color: #1d2129;
        cursor: inherit;
      }
    }
    .text-link + .text-link {
      margin-top: 6px;
    }
  }

  .content-item {
    .content-item-name {
      margin-bottom: 4px;
      .staff-can-click {
        color: rgb(var(--primary-6));
        cursor: pointer;
      }
      .tag-pickup {
        padding: 0 3px;
        line-height: 18px;
      }
      :deep(.custom-tag) {
        margin-right: 6px;
        position: relative;
        top: 1px;
      }
    }
    .content-item-tag :deep(.custom-tag.default) {
      line-height: 20px;
      padding: 4px 8px;
    }
  }
  .content-item + .content-item {
    margin-top: 10px;
  }
</style>
